<script setup>
    import { ref } from 'vue'
    import { repUpdateReportService } from '@/api/report.js'
    import {baseAddress } from '@/utils/baseAddress'
    import { Download } from '@element-plus/icons-vue'

    const baseUrl = ref()

    // 弹框状态
    const drawerState = ref(false)

    // 改变弹框状态
    const changeDrawerState = () => {
        drawerState.value = !drawerState.value
    }

    // 将子组件的方法暴露给父组件
    defineExpose({
        changeDrawerState
    })

    // 子组件接收父组件的数据
    const props = defineProps({
        rowData: Object
    })

    // from表单
    const formValue = ref()

    // 成绩和评价
    const submitData = ref({
        mark: '',
        comment: ''
    })

    // 成绩和评分效验
    const rules = {
        mark: [{ required: true, message: '成绩不能为空', trigger: 'blur' }, { pattern: /^([1-9]|[1-9][0-9]|100)$/, message: '成绩格式错误', trigger: 'blur' }],
        comment: [{ required: true, message: '评语不能为空', trigger: 'blur' }]
    }

    // 重置按钮
    const resetBtn = () => {
        submitData.value = {}
    }

    const emit = defineEmits(['newFormValue'])

    // 提交按钮
    const submitBtn = async() => {
        await formValue.value.validate()
        submitData.value.id = props.rowData.id
        const { data } = await repUpdateReportService(submitData.value)
        if (data.status === 0) {
            ElMessage.success('审批成功！')
        } else {
            ElMessage.error('审批失败！')
        }
        emit('newFormValue', true)
        changeDrawerState()
    }

    const closeDrawer = () => {
        submitData.value = {}
    }

    const openDrawer = () => {
        if (props.rowData.mark) {
            submitData.value.mark = props.rowData.mark
            submitData.value.comment = props.rowData.comment
        }
    }

    baseUrl.value = baseAddress()
    console.log(baseUrl.value);
</script>

<template>
    <div class="teacher-drawer">
        <el-drawer @close="closeDrawer" @open="openDrawer" size="50%" v-model="drawerState" title="I am the title" :with-header="false">
            <span>
                <el-form :model="submitData" :rules="rules" ref="formValue" label-position="right" label-width="100">
                    <el-form-item label="学号">
                        <el-input :value="props.rowData.uid" disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="实验名称">
                        <el-input :value="props.rowData.title" disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="实验目的">
                        <el-input :value="props.rowData.objective" disabled="false"></el-input>
                    </el-form-item>
                    <el-form-item label="实验内容">
                        <el-input class="report-content" type="textarea" :value="props.rowData.content" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="实验总结">
                        <el-input :value="props.rowData.summarize" disabled="false" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="附件">
                        <div class="file-load">
                            <div class="file-name">{{ props.rowData.filed.split('-').slice(1).join('-') }}</div>
                            <div class="file-link">
                                <el-link :icon="Download" :href="`${baseUrl}/${props.rowData.filed}`">下载</el-link>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="mark" label="成绩" style="width: 200px;">
                        <el-input v-model="submitData.mark"></el-input>
                    </el-form-item>
                    <el-form-item prop="comment" label="评语">
                        <el-input v-model="submitData.comment" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetBtn">重置</el-button>
                        <el-button @click="submitBtn" type="primary">完成</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-drawer>
    </div>
</template>

<style scoped lang="scss">
.content {
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    padding: 20px 30px 0px 0px;
    width: 100%;
    .item {
        margin-bottom: 20px;
    }
        }
.file-load {
    display: flex;
    width: 80%;
    height: 100%;
   .file-name {
    width: 80%;
    height: 100%;
    border: 1px solid #afafaf;
    padding: 0 4px 0 4px;
    color: #808080;
   }
   .file-link {
    width: 20%;
    height: 100%;
    background-color: #5e81ff;
    display: flex;
    justify-content: center;
    ::v-deep .el-link {
        width: 100%;
        height: 100%;
    }
   }
}
::v-deep .el-link__inner, ::v-deep .el-icon {
    color: #fff;
}
::v-deep .report-content .el-textarea__inner {
    min-height: 300px !important;
}
</style>